<template>
    <div class="searchCondition">
        <ul v-if="isShowCategory" class="categoryClass" style="display:flex;flex-direction: row;margin-bottom: 10px">
            <span style="display: flex;align-items: center" v-for="(item,index) in categoryNameInfo" :key="index">
                <font>{{item}}</font><b v-show="index!=2">></b>
            </span>
            <span style="display: flex;margin-top: 5px">
                <span v-for="(selectParam,index) in paramList" :key="index" class="selectParamsClass" @click="clearCondition(selectParam.key)">
                    <span>{{selectParam.key}}:</span><span style="color: red;margin-left: 5px">{{selectParam.value}}</span><span style="margin-left:0px;color: red">X</span>
                </span>
            </span>
        </ul>
        <ul>
            <li v-for="(item,index) in conditionData" :key="index">
                <span v-show="item.name!=='categoryInfo'"><strong>{{item.name}}</strong></span>
                <ul v-show="item.name!=='categoryInfo'">
                    <li style="padding-left: 10px" v-for="(paramValue,index) in item.selectItems" :key="index">
                        <span @click="selectParams(item.name,paramValue)" :title="paramValue">{{paramValue}}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
    import * as _ from 'lodash'
    @Component({
        components: {}
    })
    export default class SearchCondition extends Vue {
        //创建组件
        @Prop() params: any;
        public conditionData: any = [];
        public categoryNameInfo: Array < any >= new Array < any > ();
        public isShowCategory: boolean = false;
        public selectParamsList = new Array < any > ();
        public paramList: any = new Array < any > ();
        public async created() {
            this.conditionData = this.params.conditionData;
            this.paramList = this.params.paramList;
            // Object.keys(this.params.conditionData.categoryInfo).forEach(key=>{
            //      this.categoryNameInfo.push(this.params.conditionData.categoryInfo[key]);
            // });
            // this.categoryNameInfo=this.categoryNameInfo.reverse();
            this.isShowCategory = true;
        }
        public selectParams(key, value) {
            this.selectParamsList.push({ key: key, value: value });
            this.clickSearchCondition(this.selectParamsList);
        }
        @Emit("clickSearchCondition")
        public clickSearchCondition(selectParamsList: any) {
            return selectParamsList;
        }
        public clearCondition(key: any) {
            let newArray = new Array < any > ();
            this.paramList.forEach(item => {
                if (item.key !== key) {
                    newArray.push(item)
                }
            });
            this.paramList = newArray;
            this.handerClearCondition(key);
        }
        @Emit("handerClearCondition")
        public handerClearCondition(key: any) {
            return key;
        }
    }
</script>
<style lang="less">
    .searchCondition {
        width: 100%;
        background-color: white;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .selectParamsClass {
            float: left;
            height: 22px;
            line-height: 22px;
            border: 1px solid #DDD;
            font-size: 12px;
            vertical-align: top;
            margin: 0 5px 5px 0;
            margin-left: 10px;
            padding: 0 26px 0 4px;
            cursor: pointer;
            background: #f3f3f3;

            span {
                display: contents;
            }
        }

        >ul {
            margin: 0px;
            padding: 0px;
            width: 80%;
            min-width: 1000px;
            display: flex;
            flex-direction: column;
            align-self: center;
            border-top: 1px solid #DDD;
            background: #f3f3f3;

            >li {
                width: 100%;
                list-style-type: none;
                margin: 0px;
                padding: 0px;
                display: flex;
                flex-direction: row;

                >span {
                    width: 100px;
                    min-height: 34px;
                    border-bottom: 1px solid #DDD;
                    background: #f3f3f3;
                    padding-top: 10px;
                    padding-left: 10px;
                }

                >ul {
                    margin: 0px;
                    padding: 0px;
                    display: flex;
                    flex-direction: row;
                    width: calc(100% - 100px);
                    border-bottom: 1px solid #DDD;
                    border-right: 1px solid #DDD;
                    flex-wrap: wrap;

                    >li {
                        list-style-type: none;
                        margin-right: 5px;
                        margin-bottom: 4px;
                        height: 26px;
                        line-height: 26px;
                        color: #005aa0;
                        zoom: 1;
                        width: 130px;
                        display: flex;

                        >span {
                            overflow: hidden;
                            cursor: pointer;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        >span:hover {
                            color: red;
                        }
                    }
                }
            }
        }

        >ul:nth-child(2) {
            border-top: 1px solid #ddd !important;
        }

        .categoryClass {
            display: flex;
            flex-direction: row;

            span:nth-child(1) {
                margin-bottom: 3px;

                font {
                    font-size: 18px;
                    font-weight: 700;
                    font-family: "microsoft yahei";
                }

            }

            span:nth-child(2) {
                margin-left: 5px;

                font {
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    height: 22px;
                    padding: 0 4px 0 8px;
                    border: 1px solid #ddd;
                    line-height: 22px;
                    vertical-align: top;
                    background-color: #fff;
                }

                ;

            }

            span:nth-child(3) {
                margin-left: 5px;

                font {
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    height: 22px;
                    padding: 0 4px 0 8px;
                    border: 1px solid #ddd;
                    line-height: 22px;
                    vertical-align: top;
                    background-color: #fff;
                }

            }
        }
    }
</style>